{extend name="layout/layout" /}

{block name="header"}
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">{$title?$title:'商城'}</h1>
	</header>
{/block}

{block name="style"}
	<style>

		.mui-card{
			margin: 10px 0;
		}
		.mui-card-footer .mui-btn{
			font-size: 12px;
			padding: 4px 8px;
		}

		.total{
			padding: 5px 15px;
			min-height: 30px;
			font-size: 12px;
		}
		.mui-media-body{
			font-size: 12px;
		}

		.confirm-order{
			margin-bottom: 50px;
		}
		.address{
			background: #fff;
		}

		.address .mui-row{
			padding: 5px;
		}

		.address-icon{
			text-align: center;
			line-height: 50px;
			color:#8f8f94;
		}

		.order-status{
			background: #e60012;
			color:#fff;
			font-size: 16px;
			padding:20px;
			border-top: 1px solid #ddd;
		}
	</style>
{/block}

{block name="main"}
	<div class="detail" v-cloak>
		<div class="order-status">{{detail.order_status_text}}</div>

		<ul class="mui-table-view">
		    <li class="mui-table-view-cell">
			    <div class="address">
					<div v-if="detail.address" class="mui-row">
						<div class="address-icon mui-col-xs-1">
							<i class="mui-icon mui-icon-location"></i>
						</div>
						<div class="address-detail mui-col-xs-11">
							<p>
								收货人：{{detail.address.recipients}}
								<span class="mui-pull-right">
									{{detail.address.mobile}}
								</span>
							</p>
							<p>{{detail.address.province}}{{detail.address.city}}{{detail.address.area}}{{detail.address.address}}</p>
						</div>
					</div>
				</div>	
		    </li>
		    <li class="mui-table-view-cell">
		    	买家留言：{{detail.message}}
		    </li>
		</ul>
		


		<div class="list">

			<div class="mui-card item">
				<!--页眉，放置标题-->
				<div class="mui-card-header">
					<div class="mui-col-xs-12">
						<div class="business_name">{{detail.business_name}}</div>
					</div>
				</div>
				<!--内容区-->
				<div class="mui-card-content">
					<ul class="mui-table-view">

					    <li class="mui-table-view-cell mui-media" v-for="goods, goods_index in detail.goods">
					        <a href="javascript:;">
					            <img class="mui-media-object mui-pull-left" :src="goods.original_image">
					            <div class="mui-media-body">
					                {{goods.goods_name}}
					                <p class='mui-ellipsis'>{{goods.spec_name}}</p>
					                <p class='mui-ellipsis'>
					                	<span class="text-theme">￥{{goods.price}} 积分可抵扣{{goods.point}} 元</span>
					                	<span class="mui-pull-right">x {{goods.number}}</span>
					                </p>
					                

					            </div>
					        </a>
					        <p class="mui-text-right" v-if="detail.pay_status == 1 && detail.order_status != 0">
			                	<a href="javascript:;" @tap.prevent="apply_after(goods)" class="mui-btn mui-btn-default mui-btn-outlined">申请售后</a>
			                </p>
					    </li>
					</ul>
				</div>
				<!--页脚，放置补充信息或支持的操作-->
				<div class="mui-card-footer total">
					<div class="mui-col-xs-12">
						<p>订单类型：<b class="text-danger">{{detail.order_prom_type_text}}</b></p>

						<p class="data-box text-danger" id="dateShow1" v-if="detail.order_prom_type == 2">
							<b>
								剩余使用时间：
								<span class="date-tiem d">00</span>天
								<span class="date-tiem h">00</span>时
								<span class="date-tiem m">00</span>分
								<span class="date-s s">00</span>秒
							</b>
						</p>
						<p v-if="detail.order_prom_type == 1">发货数量：{{detail.delivery_task.delivery_number}}/{{detail.delivery_task.need_number}}</p>
						<p>订单号:{{detail.order_no}}</p>
						<p>商品总价：{{detail.goods_amount}}</p>
						<p>积分抵扣：{{detail.integral_money}}</p>
						<p>优惠券抵扣：{{detail.coupon_price}}</p>
						<p>运费：{{detail.freight}}</p>
						<p>订单总价：{{detail.order_amount}}</p>
						<p>创建时间：{{detail.create_time}}</p>
						<p v-if="detail.pay_time">付款时间：{{detail.pay_time}}</p>
						<p v-if="detail.shipping_time">发货时间：{{detail.shipping_time}}</p>
						<p v-if="detail.confirm_time">成交时间：{{detail.confirm_time}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<div class="mui-col-xs-12 mui-text-right">
						<!-- 订单已关闭 -->
						<div v-if="detail.order_status == 0">
							<a href="javascript:;" @tap.prevent="del(detail, index)" class="mui-btn mui-btn-default mui-btn-outlined">删除订单</a>
						</div>
						<!-- 等待买家付款 -->
						<div v-if="detail.order_status == 1">
							<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="cancel(detail, index)">取消订单</a>
							<a :href="'/mobile/order/payorder/type/order/id/'+detail.id" class="mui-btn mui-btn-theme mui-btn-outlined">付款</a>
						</div>
						<!-- 等待卖家发货 -->
						<div v-if="detail.order_status == 2">
							<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="remind(detail)">提醒发货</a>
						</div>
						<!-- 卖家已发货 -->
						<div v-if="detail.order_status == 3">
							<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="shipping(detail)">查看物流</a>
							<a href="" class="mui-btn mui-btn-theme mui-btn-outlined" @tap.prevent="signOrder(detail)">确认收货</a>
						</div>
						
						<!-- 订单完成 -->
						<div v-if="detail.order_status == 4">
							<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="shipping(detail)">查看物流</a>
							<a href="" class="mui-btn mui-btn-default mui-btn-outlined" @tap.prevent="del(detail, index)">删除订单</a>
							<a href="" class="mui-btn mui-btn-theme mui-btn-outlined" @tap.prevent="comment(detail)" v-if="detail.comment_status == 0">评价</a>
						</div>
					</div>
				</div>


			</div>


		</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script src="/assets/mobile/js/leftTime.min.js"></script>
	<script>
			

		var detailVue = new Vue({
			el: '.detail',
			data: {
				order_id : "{$data.order_id?:''}",
				detail:{},
			},
			mounted: function(){
				this.getDetail();
			},
			methods:{
				//获取订单列表
				getDetail: function(){
					layer.open({
						type:2,
						shadeClose: false
					});

					var that = this;
					var url =  'order/detail';
					request(that, {'url': url, 'data': {
					  	"order_id": that.order_id,
					}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.detail = res.data;

							if(res.data.order_prom_type == 2) {
								that.function_name(res.data.expire_date_time,"#dateShow1");
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//删除订单
				del: function(item, index){
					var that = this;
					mui.confirm('确认删除该订单吗？', '提示', ['取消', '确认'], function(e) {
	                    if (e.index == 1) {
							var url =  'order/delOrder';
							layer.open({
								type:2,
								shadeClose: false,
							});
							request(that, {'url': url, 'data': {
							  	"id": item.id,
							}}, function(res){
								layer.closeAll();
								if(res.code == 200) {
									that.list.splice(index,1);
								}	
								mui.toast(res.msg);
							});
						}
					});
				},
				//取消订单
				cancel: function(item, index){
					var that = this;
					mui.confirm('确认删除该订单吗？', '提示', ['取消', '确认'], function(e) {
	                    if (e.index == 1) {
							var url =  'order/cancelOrder';
							layer.open({
								type:2,
								shadeClose: false,
							});
							request(that, {'url': url, 'data': {
							  	"id": item.id,
							}}, function(res){
								layer.closeAll();
								mui.toast(res.msg);
								if(res.code == 200) {
									that.getList();
								}	
							});
						}
					});
				},
				//提醒发货
				remind: function(item){
					var that = this;
					var url =  'order/orderRemind';
					request(that, {'url': url, 'data': {
					  	"order_id": item.id,
					}}, function(res){
						var res = res.body;
						mui.toast(res.msg);
					});
				},
				//查看物流
				shipping: function(item){
					location.href = '/mobile/order/shipping?code='+item.shipping_code+'&no='+item.shipping_no+'&name='+item.shipping_name;
				},
				//确认收货
				signOrder: function(item){
	  				var that = this;
					mui.confirm('确认收货吗？', '提示', ['取消', '确认'], function(e) {
	                    if (e.index == 1) {
							var url =  'order/signOrder';
							layer.open({
								type:2,
								shadeClose: false,
							});
							request(that, {'url': url, 'data': {
							  	"order_id": item.id,
							}}, function(res){
								layer.closeAll();
								mui.toast(res.msg);
								if(res.code == 200) {
									that.getList();
								}	
							});
	                    }
	                })
				},
				//评价订单
				comment: function(item) {
					location.href = '/mobile/order/comment?order_id='+item.id;
				},
				//申请售后
				apply_after: function(goods) {
					location.href = '/mobile/aftersales/selectType?order_id='+this.detail.id+'&item_id='+goods.id;
				},
				function_name: function(time,obj) {
					$.leftTime(time,function(d){
						if(d.status){
							var $dateShow1=$(obj);
							$dateShow1.find(".d").html(d.d);
							$dateShow1.find(".h").html(d.h);
							$dateShow1.find(".m").html(d.m);
							$dateShow1.find(".s").html(d.s);
						}
					});
				}
			}
		});
	</script>
{/block}